<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      :ellipsis="false"
  ><div class="demo-type">
      <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
  </div>
    <el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
    <el-menu-item index="2"><router-link to="/admin/user" v-show="user.id">用户管理</router-link></el-menu-item>
    <el-menu-item index="3"><router-link to="/admin/book" v-show="user.id">电子书管理</router-link></el-menu-item>
    <el-menu-item index="4"><router-link to="/admin/category" v-show="user.id">分类管理</router-link></el-menu-item>
    <el-menu-item index="5"><router-link to="/admin/chart" v-show="user.id">图表统计</router-link></el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="6" v-show="!user.id">登录</el-menu-item>
    <el-menu-item index="8" v-show="user.id">您好：{{user.name}}</el-menu-item>
    <el-menu-item index="7" v-show="user.id">登出</el-menu-item>
  </el-menu>
  <el-dialog v-model="dialogLogin" title="用户表单">
    <el-form :model="form" :rules="rules" ref="ruleFormRef">
      <el-form-item label="登录名" :label-width="formLabelWidth" prop="loginName">
        <el-input v-model="form.loginName" autocomplete="off" placeholder="Please input loginName"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
        <el-input v-model="form.password" autocomplete="off" type="password"
                  placeholder="Please input password"
                  show-password/>
      </el-form-item>
<!--      <el-form-item :label-width="formLabelWidth">-->
<!--        <div style="width: 32px;height: 32px;margin-top: 5px;cursor: pointer;" title="利用Gitee登录" @click="giteeLogin">-->
<!--          <img style="height: 100%;width: 100%;" src="http://rtyoq5xl2.bkt.clouddn.com/other/gitee.png">-->
<!--        </div>-->
<!--      </el-form-item>-->
    </el-form>
    <template #footer>
        <span class="dialog-footer">
        <el-button @click="dialogLogin = false">关闭</el-button>
        <el-button type="primary" @click="login(ruleFormRef)">
          登录
        </el-button>
         </span>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogVisible"
  >
    <span>是否要退出登录?</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="logout">
          确认登出
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {computed, h, reactive, ref} from 'vue'
import {setup, Vue} from "vue-class-component";
import {ElNotification, FormInstance, FormRules} from "element-plus";
import axios from "axios";
import store from "@/store";
const activeIndex = ref('0')
const dialogLogin=ref(false)
const dialogVisible=ref(false)
const ruleFormRef = ref<FormInstance>()
const form = reactive({
  loginName:'',
  password:'',
})
const user=computed(()=>store.state.user)

const logout=(()=>{
  axios({
    method: 'delete',
    url: '/user/logout/'+user.value.token,
  }).then((response) => {
    dialogVisible.value = false
    if (response.data.data===true){
      form.loginName=''
      form.password=''
      store.commit("setUser",{})
      open1("teal",response.data.message)
    }else {
      open1("red",response.data.message)
    }
  })
})

// const giteeLogin=(()=>{
//   axios({
//     method: 'get',
//     url: '/user/preLoginByGitee',
//   }).then((response) => {
//     window.location=response.data.data.preLoginByGitee;
//   })
// })

const login = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let password=hexMd5(form.password+KEY)
      axios({
        method: 'post',
        url: '/user/login',
        // 传递参数
        data: {
          loginName: form.loginName,
          password:password,
        },
        // 设置请求头信息
        headers: {
          "Content-Type":"application/json"
        }
      }).then((response) => {
        dialogLogin.value = false
        if (response.data.code===200){
          store.commit("setUser",response.data.data)
          open1("teal",response.data.message)
        }else {
          open1("red",response.data.message)
        }
      })
    }
  })
}
const formLabelWidth = '140px'
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  if (key==='6'){
    dialogLogin.value=true
  }
  if (key==='7'){
    dialogVisible.value=true
  }
}
const rules = reactive<FormRules>({
  loginName: [
    {
      required: true,
      message: '登录名不能为空',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
  ],
})
const open1 = (color:string,msg:string) => {
  ElNotification({
    title: '消息',
    message: h('i', { style: 'color: '+color }, msg),
    duration:3000,
  })
}
</script>

<style scoped>

.flex-grow {
  flex-grow: 1;
}

</style>